<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酒店预订</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<link href="styles/bootstrap.min.css" rel="stylesheet" />
<link href="styles/NewGlobal.css" rel="stylesheet" />
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>

<script src="Scripts/zepto.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>

    <!--城市插件-->

    <script src="/js/plugins/city/js/cityTemplate.js"></script>
    <script src="/js/plugins/kucity/kuCity.js"></script>
    <link rel="stylesheet" href="../js/plugins/kucity/kuCity.css">


</head>
<body>
 <div class="header">
 <a href="index.html" class="home">
            <span class="header-icon header-icon-home"></span>
            <span class="header-name">主页</span>
</a>
<div class="title" id="titleString">酒店列表</div>
<a href="javascript:history.go(-1);" class="back">
            <span class="header-icon header-icon-return"></span>
            <span class="header-name">返回</span>
        </a>
 </div>

        
  <div class="container hotellistbg">

     <form id="searchForm" action="/hotels/queries" method="get">


         <p>目的地:</p><select id="city" name="cityId">
             <option value="-1"></option>

         </select><br/>

         <p>商圈: </p><select id="business" name="businessId">
                  <option value="-1"></option>

                 </select><br/>

         <p>交通枢纽: </p><select id="traffic" name="trafficId">
         <option value="-1"></option>

     </select><br/>
         <input id="search" type="button" value="搜酒店"/>
     </form>

         <ul class="unstyled hotellist">
       
             <li render-loop="list">
              <a id="a" href="" render-key="list.id" render-fun="handler">
                 <img id="img" class="hotelimg fl" render-src="list.coverUrl" />
              <div class="inline">
                  <h3 id="name" render-html="list.name"></h3>
                  <p id="address" render-html="list.address">地址:</p>
                  <p id="tel" render-html="list.tel"></p>
                  <p>价格:<span id="minPrice" render-list="list.minPrice"></span>元起</p>
              </div>
              <div class="clear"></div>  
               </a> 
               <ul class="unstyled">
                   <li><a href="/hotel/Hotel.aspxcheckInDate.html" class="order">预订</a></li>
                   <li><a href="https://map.baidu.com/" class="gps">导航</a></li>
                   <li><a href="Hotelinfo.aspx@id=5" class="reality">实景</a></li>
               </ul>
             </li>
           

           

         </ul>
  </div>


  <div class="footer">
  <div class="gezifooter">
      
      <a href="login.aspx" class="ui-link">立即登陆</a> <font color="#878787">|</font> 
       <a href="reg.aspx" class="ui-link">免费注册</a> <font color="#878787">|</font>                 
                  

       <a href="/index.html" class="ui-link">骡窝窝</a>
  </div>
  <div class="gezifooter">
    <p style="color:#bbb;">骡子酒店连锁 &copy; 版权所有 2015-2025</p>
  </div>
  </div>

</body>
<script>
 $(function () {
     //初始化kuCity
     $("#destination").kuCity();


     //查询所有的酒店
     $.get("/hotels",function (data) {


         //渲染数据
         $(".hotellist").renderValues({list: data},{
             handler:function (ele,val) {
                 ele.href = "/hotel/Hotel.aspxcheckInDate.html?hotelId=" + val;
             }
         });



     })

     //查询所有的城市
    $.get("/regions/cities",function (data) {
        $.each(data,function (i,ele) {
            $("<option></option>").val(ele.id).html(ele.name).appendTo("#city");
        })
    })

     //查询当前城市对应的商圈和交通枢纽
     $("#city").change(function () {

         var cityId = $("#city").val();

         $.get("/hotelItems/items",{cityId: cityId,parentId: 1},function (data) {
             $("#business").html("");
             $("<option></option>").val(-1).html("").appendTo("#business");
             $.each(data,function (i,ele) {
                 $("<option></option>").val(ele.id).html(ele.title).appendTo("#business");
             })
         })

         $.get("/hotelItems/items",{cityId: cityId,parentId: 3},function (data) {
             $("#traffic").html("");
             $.each(data,function (i,ele) {
                 $("<option></option>").val(-1).html("").appendTo("#traffic");
                 $("<option></option>").val(ele.id).html(ele.title).appendTo("#traffic");
             })
         })
     })

     //提交表单查询酒店
     $("#search").click(function () {
        var params = $("#searchForm").serialize();
         $.get("/hotels/queries",params,function (data) {
             $(".hotellist").html();
             //渲染数据
             $(".hotellist").renderValues({list: data},{
                 handler:function (ele,val) {
                     ele.href = "/hotel/Hotel.aspxcheckInDate.html?hotelId=" + val;
                 }
             });
         })
     })


 })
</script>


</html>
